<template>
	<view class="header-bg-image header-bg">
		<view style="height: 50rpx;"></view>
		<view class="padding-30">
			<view class="margin-30-0" @click="$tools.navigateBack()">
				<u-icon name="arrow-left" color="#333333" size="20"></u-icon>
			</view>
			<u-search placeholder="搜索课程" bgColor="#ffffff" v-model="keyword" @custom="searchGoodsList" @search="searchGoodsList"></u-search>
			<view class="margin-30-0">
				<u-tabs :list="list1" @click="chooseTabs" lineColor="#967C5E"></u-tabs>
			</view>
			<!-- 商品列表 -->
			<goodsItem :list="list"  @click="goToDetail"></goodsItem>
			<u-empty v-if="list.length == 0"
			        mode="list"
			        icon="http://cdn.uviewui.com/uview/empty/list.png"
					width="150px"
					height="150px"
					text="列表为空"
					textSize="18"
			>
			</u-empty>
			<view style="padding-bottom: 100rpx;">
				<u-loadmore v-if="loading" status="loading" />
				<u-loadmore v-if="isLastPage" status="nomore" />
			</view>
		</view>
	</view>
</template>

<script>
	import goodsItem from "@/components/goods/goods.vue"
	export default {
		components:{
			goodsItem
		},
		data() {
			return {
				// 搜索关键词
				keyword: '',
				// tabs列表
				list1: [],
				// 商品列表
				// goodsList:[
				// 	{image:'../../static/image/01.png',title:'课程',price:'100'},
				// 	{image:'../../static/image/01.png',title:'课程',price:'100'},
				// 	{image:'../../static/image/01.png',title:'课程',price:'100'},
				// 	{image:'../../static/image/01.png',title:'课程',price:'100'},
				// 	{image:'../../static/image/01.png',title:'课程',price:'100'}
				// ],
				page:1,
				limit:10,
				cate_id:'', //分类id(可选)
				is_top:1, //0不推荐1推荐(可选)
				list:[],
				isLastPage: false,
				loading: false,
			}
		},
		onShow() {
			this.page = 1
			this.limit = 10
			this.list = []
			this.getCateList()
			this.getGoodsList()
		},
		// 刷新 上拉刷新
		onPullDownRefresh() {
			this.page = 1
			this.isLastPage = false
			this.list = []
			this.getGoodsList().finally(() => {
				// 停止当前页面下拉刷新
				uni.stopPullDownRefresh();
			});
		},
		// 加载下一页 下拉加载
		onReachBottom() {
			if (this.list.length >= this.page * this.limit) {
				this.isLastPage = false;
				this.page += 1;
				this.getGoodsList();
			} else {
				this.isLastPage = true
			}
		},
		methods: {
			// 搜索商品
			searchGoodsList(){
				this.page = 1
				this.limit = 10
				this.list = []
				this.getGoodsList()
			},
			// 跳转商品详情
			goToDetail(item){
				this.$tools.navigateTo('/pages/index/index-list/goods-info?goods_id='+item.id)
			},
			// 获取分类
			async getCateList(){
				this.list1 = []
				let res = await this.$http.post(this.$api.cate_list,{
					page:1,
					limit:100,
					type:4
				},{token:true})
				console.log(res)
				if(res.code == 1){
					this.list1 = res.data.map(item=>{
						return {
							id:item.id,
							name:item.name
						}
					})
					this.list1.unshift({id:'1122',name:'推荐'})
				}
			},
			// 获取商品列表
			async getGoodsList(){
				let form = {
					page:this.page,
					limit:this.limit,
					cate_id:this.cate_id,
					goods_type:3,
					is_top:this.is_top,
					search:this.keyword
				}
				this.$http.post(this.$api.goods_list,form,{token:true}).then(res => {
					this.list = [...this.list,...res.data]
				}).finally(() => {
					// 停止当前页面下拉刷新
					uni.stopPullDownRefresh();
				})
			},
			// 选择分类
			chooseTabs(e){
				if(e.name == '推荐'){
					this.cate_id= ''
					this.is_top = 1
				}else{
					this.cate_id = e.id
					this.is_top = ''
				}
				this.page = 1
				this.isLastPage = false
				this.list = []
				this.getGoodsList()
			},
		}
	}
</script>

<style lang="scss" scoped>
	.header-bg-image {
		width: 100%;
		height: 800rpx;
	}
</style>